<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
            fdsaffdsa{{ message  }}fdsfd
            <div>
                {{message}}
                <div>

                    <div>

                        <div>
                            {{message}}

                        </div>
                    </div>
                </div>
            </div>
            <span></span>
            fdsfdas{{message}}fdsafds
    </div>
    <script src="./static/myvue.js"></script>
    <script>
        // 如何把data里的数据渲染到页面上去 
        // 渲染范围 
       
        let vm=new Vue({
            el:"#app",
            data:{
                message:"数据"
            }
        })

        let data = {
            name:"张三",
            age:20
        }
        // function Obj(data){//ES5观察数据
        //     let keys = Object.keys(data);
        //     keys.forEach(key=>{
        //         let value = data[key]
        //         Object.defineProperty(data,key,{
        //             configurable:true,
        //             enumerable:true,
        //             get(){
        //                 console.log("监听到了");
        //                 return value
        //             },
        //             set(newvalue){
        //                 console.log("改变了");
        //                 value=newvalue;
        //             }
        //         })
        //     })
        // }
       
        // Obj(data)
        // data.name="lisi"
        // console.log(data);
        // delete data.name
        // console.log(data);
       // ES6语法 观察对象的属性
        // let zhangsan = new Proxy(data,{
        //     configurable:true,
        //     enumerable:true,
        //     get(data,key){
        //         console.log("监听到");
        //         return data[key];
        //     },
        //     set(data,key,newdata){
        //         console.log("新的值",data,key,newdata);
        //         data[key]=newdata;
        //     }
        // })
        // zhangsan.age=30
        // console.log(zhangsan);
    // </script>
</body>
</html>